<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8" />
 <title>Box2D 1, http://www.i-programmer.info/programming/graphics-and-imaging/3639-getting-started-with-box2d-in-javascript.html?start=2</title>
 <script type="text/javascript" 
          src="Box2dWeb-2.1.a.3.js">
 </script>
 <script>
  var world;
  function boxdrop() {
  var  b2Vec2 = Box2D.Common.Math.b2Vec2
  , b2BodyDef = Box2D.Dynamics.b2BodyDef
  , b2Body = Box2D.Dynamics.b2Body
  , b2FixtureDef = Box2D.Dynamics.b2FixtureDef
  , b2Fixture = Box2D.Dynamics.b2Fixture
  , b2World = Box2D.Dynamics.b2World
  , b2MassData = 
     Box2D.Collision.Shapes.b2MassData
  , b2PolygonShape = 
     Box2D.Collision.Shapes.b2PolygonShape
  , b2CircleShape = 
     Box2D.Collision.Shapes.b2CircleShape
  , b2DebugDraw = Box2D.Dynamics.b2DebugDraw
  ;
  world = new b2World(new b2Vec2(0, 10),true );

  var bodyDef = new b2BodyDef;
  bodyDef.type = b2Body.b2_dynamicBody;
  bodyDef.position.x = 10;
  bodyDef.position.y =0;
 
  var fixDef = new b2FixtureDef;
  fixDef.density = 1.0;
  fixDef.friction = 0.5;
  fixDef.restitution = 0.5;
  fixDef.shape = new b2CircleShape(1);

//var body=world.CreateBody(bodyDef);
//body.CreateFixture(fixDef);
//body.SetLinearVelocity(new b2Vec2(2,2));

//world.CreateBody(bodyDef).CreateFixture(fixDef);

var body1=world.CreateBody(bodyDef);
body1.CreateFixture(fixDef);
body1.SetLinearVelocity(new b2Vec2(2,2));

bodyDef.position.x = 3;
bodyDef.position.y = 0;
var body2=world.CreateBody(bodyDef);
body2.CreateFixture(fixDef);
body2.SetLinearVelocity(new b2Vec2(-7,2));

//    var joint = new b2RevoluteJointDef();
//    joint.Initialize(body1, body2, body1.GetWorldCenter());
//    world.CreateJoint(joint);

// Joints: http://www.binarytides.com/revolute-joint-box2d-javascript/


bodyDef.type = b2Body.b2_staticBody;
 bodyDef.position.x = 5;
 bodyDef.position.y = 12;
 fixDef.shape = new b2PolygonShape;
 fixDef.shape.SetAsBox(10, 0.2);
 world.CreateBody(bodyDef).CreateFixture(fixDef);

bodyDef.position.x = 0.2;
bodyDef.position.y = 0;  
fixDef.shape.SetAsBox( 0.2,12);
world.CreateBody(bodyDef).CreateFixture(fixDef);

bodyDef.position.x = 17-0.2;
bodyDef.position.y = 0;  
world.CreateBody(bodyDef).CreateFixture(fixDef);

bodyDef.position.x = 7;
bodyDef.position.y = 6;  
fixDef.shape.SetAsBox( 3,1);
world.CreateBody(bodyDef).CreateFixture(fixDef);


  setupDebugDraw();
  window.setInterval(update, 1000 / 60);
 }
 function update() {
  world.Step(1 / 60  , 10 , 10 );
  world.DrawDebugData();
  world.ClearForces();
 };
 function setupDebugDraw() {
  var b2DebugDraw = Box2D.Dynamics.b2DebugDraw;
  var debugDraw = new b2DebugDraw();
  debugDraw.SetSprite(
    document.getElementById("canvas").
                        getContext("2d"));
  debugDraw.SetDrawScale(30.0);
  debugDraw.SetFillAlpha(0.3);
  debugDraw.SetLineThickness(1.0);
  debugDraw.SetFlags(
      b2DebugDraw.e_shapeBit | 
       b2DebugDraw.e_jointBit);
  world.SetDebugDraw(debugDraw);
  };
  </script>
</head>
 <body onload="boxdrop();">
  <canvas id="canvas" 
         width="600" 
         height="400" style="background-color:#333333;">
  </canvas>
 </body>
</html>
